<template>
	<view>
		<view style=" background: -webkit-linear-gradient(#ffffff,#eceef4); padding-top: 20rpx;">
			<view style="display: flex; padding: 34rpx; align-items: center;">
				<view style="flex: 1;">
					<view>
						<text style="font-size: 46rpx; color:#212121">{{user.nickname}}</text>
					</view>
					<view style="display: flex; padding: 10rpx 0rpx;">
						<view style="padding: 6rpx; display: flex; background-color: #FF5722;border-radius: 22rpx; height: 44rpx;" v-if="user.village">
							<view style="width:32rpx; height: 32rpx; background-color: #FFFFFF; border-radius: 50%; text-align: center;">
								<u-icon name="level" color="#FF5722" size="24" top="-4"></u-icon>
							</view>
							<view style="padding: 0rpx 15rpx; color: #ffffff;">
								<text style=" font-size: 24rpx; vertical-align: 5rpx;">认证村民</text>
							</view>
						</view>
						<view style="padding: 6rpx; display: flex; background-color: #38a93e;border-radius: 22rpx; height: 44rpx;" v-else>
							<view style="width:32rpx; height: 32rpx; background-color: #FFFFFF; border-radius: 50%; text-align: center;">
								<u-icon name="level" color="#38a93e" size="24" top="-4"></u-icon>
							</view>
							<view style="padding: 0rpx 15rpx; color: #ffffff;">
								<text style=" font-size: 24rpx; vertical-align: 5rpx;">普通用户</text>
							</view>
						</view>
					</view>
				</view>
				<view>
					<u-image height="120" width="120" :src="user.avatar" shape="circle"></u-image>
				</view>
			</view>
			<view style="display: flex; ">
				<view style="width: 30%; text-align: center;">
					<u-icon name="integral" label="积分" size="24" color="#9a9a9a" label-size="24" label-color="#9a9a9a">
					</u-icon><text
						style="padding-left: 10rpx; font-size: 40rpx; font-weight: 500; color:#0f1741;">{{user.score}}</text>
				</view>
				<view style="width: 30%; text-align: center;">
					<u-icon name="red-packet" label="余额" size="24" color="#9a9a9a" label-size="24"
						label-color="#9a9a9a"></u-icon><text
						style="padding-left: 10rpx; font-size: 40rpx; font-weight: 500; color:#0f1741;">{{user.money}}</text>
				</view>
				<view style="width: 40%; text-align: center;">
					<u-icon name="calendar" label="连续签到" size="24" color="#9a9a9a" label-size="24"
						label-color="#9a9a9a"></u-icon><text
						style="padding-left: 10rpx; font-size: 40rpx; font-weight: 500; color:#0f1741;">{{SignIn.successions}}天</text>
				</view>
			</view>
		</view>

		<view style="padding: 24rpx; margin-top: 50rpx;">
			<view style="background-color: #ffffff;  border-radius: 40rpx; padding: 24rpx 24rpx 0rpx 24rpx;">
				<view style="padding: 0rpx 20rpx;">常用功能</view>
				<view>
					<u-grid :col="4" :border="false">
							<u-grid-item @click="onClickInfo">
								<u-icon name="setting-fill" :size="58" color="#38a93e"></u-icon>
								<view class="grid-text">个人资料</view>
							</u-grid-item>
							<u-grid-item @click="onClickMission">
								<u-icon name="calendar-fill" :size="58" color="#38a93e"></u-icon>
								<view class="grid-text">积分签到</view>
							</u-grid-item>
							<u-grid-item @click="onClickLogout">
								<u-icon name="close-circle-fill" :size="58" color="#38a93e"></u-icon>
								<view class="grid-text">退出登陆</view>
							</u-grid-item>
						</u-grid>
				</view>
			</view>
			
		</view>









		<u-tabbar v-model="tabbar_current" :list="tabbar" :before-switch="beforeSwitch" active-color="#38a93e">
		</u-tabbar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: null,
				token: '',
				tabbar: [],
				tabbar_current: 4,
				user: {},
				SignIn: {},
			}
		},
		onLoad() {
			
		},
		onShow(){
			var that = this;
			this.checkLogin();
			uni.request({
				url: this.$unishow + 'api/svuser/index',
				method: 'GET',
				data: {},
				header: {
					token: this.token
				},
				success: res => {
					that.tabbar = res.data.bottomnav;
					that.tabbar[0].iconPath = 'home';
					that.tabbar[0].selectedIconPath = "home-fill";
					that.tabbar[4].iconPath = 'account';
					that.tabbar[4].selectedIconPath = "account-fill";
					that.user = res.data.MyUser;
					that.SignIn = res.data.SignIn;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			async checkLogin() {
				this.userinfo = uni.getStorageSync('userinfo');
				this.token = this.userinfo.token;
				let res = await this.$api.myRequest({
					url: 'api/index/checklogin',
					header: {
						token: this.token
					}
				});
				console.log(res);
				if (res.data.code == 0) {
					await uni.showModal({
						title: '温馨提示',
						content: '你还没，请先登录',
						showCancel:false,
						success(res) {
							if (res.confirm) {
								// 账户秘密登录
								let url = '/pages/login/login';
								uni.navigateTo({
									url: url
								});
							}
						}
					})
				}
			},
			onClickInfo(){
				uni.navigateTo({url:'/pages/user/info'});
			},
			onClickMission(){
				uni.navigateTo({
					url:'/pages/user/mission'
				})
			},
			onClickLogout(){
				var that = this;
				uni.request({
					url: this.$unishow + 'api/index/logout',
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code){
							that.$refs.uToast.show({
								title: res.data.msg,
								url:'/pages/login/login'
							});
							that.userinfo = {};
							uni.setStorageSync('userinfo', that.userinfo);
							that.token = '';
						}else{
							that.$refs.uToast.show({
								title: '退出失败',
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			beforeSwitch(index) { //底部导航选择
				console.log(this.tabbar[index].pagePath);
				this.$tourl(this.tabbar[index].pagePath)
			}
		}
	}
</script>

<style>
	page {
		background-color: #eceef4;
	}
	.grid-text{
		padding: 12rpx;
		font-size: 26rpx;
		color: #212121;
	}
</style>
